<template>
  <v-navigation-drawer
    id="core-navigation-drawer"
    v-model="drawer"
    :dark="barColor !== 'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)'"
    :expand-on-hover="expandOnHover"
    :src="
      barImage === true || barImage === undefined || barImage === ''
        ? ''
        : !/^https?/gi.test(barImage) && !barImage.indexOf('/') == 0
        ? `/${barImage}`
        : barImage
    "
    mobile-breakpoint="960"
    :mini-variant="expandOnHover"
    mini-variant-width="80"
    app
    width="260"
    v-bind="$attrs"
  >
    <template v-slot:img="props">
      <v-img :gradient="`to bottom, ${barColor}`" v-bind="props" />
    </template>

    <v-list-item two-line>
      <v-list-item-content>
        <v-list-item-title class="text-center font-weight-regular display-2">
          <span class="logo-normal">{{ systemTitle }}</span>
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-divider class="mb-1" />

    <v-list dense nav>
      <base-item-group :item="profile" />
    </v-list>

    <v-divider class="mb-2" />

    <v-list expand nav>
      <div />
      <template v-for="(item, i) in menus">
        <base-item-group v-if="item.children" :key="`group-${i}`" :item="item">
          <!--  -->
        </base-item-group>
        <base-item v-else :key="`item-${i}`" :item="item" />
      </template>
      <div />
    </v-list>
  </v-navigation-drawer>
</template>

<script>
// Utilities
import { mapState } from "vuex";
import { convertRoutesMaterial } from "@/common/utils/routeConvertMenu";
// 引入socket.js
import { socket } from "@/api/socket";

export default {
  name: "GlobalCoreDrawer",

  props: {
    expandOnHover: {
      type: Boolean,
      default: false,
    },
  },

  data: () => ({
    systemTitle: "Vuetify 后台管理系統", // MaterialAdmin
    /**
     * 菜单
     */
    menus: [],
  }),

  /**
   * 计算属性
   */
  computed: {
    ...mapState({
      barColor: (state) => state.app.barColor,
      barImage: (state) => state.app.barImage,
      mainMenu: (state) => state.permission.addRouters,
    }),
    drawer: {
      get() {
        return this.$store.state.app.drawer;
      },
      set(val) {
        this.$store.commit("SET_DRAWER", val);
      },
    },
    profile() {
      return {
        avatar: true,
        group: "",
        title: "头像",
        children: [
          {
            icon: "mdi-account",
            to: "account/user-profile",
            title: "用户信息",
          },
          {
            to: "",
            title: "设置",
          },
        ],
      };
    },
  },
  watch: {
    "$vuetify.breakpoint.smAndDown"(val) {
      this.$emit("update:expandOnHover", !val);
    },
    // 菜单变化
    mainMenu(val) {
      this.setMenus();
    },
  },
  created() {
    this.setMenus();
  },
  methods: {
    // 重新生成
    setMenus() {
      // 这里生成动态的菜单
      // 还需要对菜单数组进行拼接，以符合 Vuetify-Material 菜单的数据结构
      const routes = convertRoutesMaterial(
        this.mainMenu.find((item) => item.path === "/")
      );
      this.menus = (routes && routes.children) || [];
    },
  },
  // socket 初始化
  async mounted() {
    await socket.init();
  },
  async destroyed() {
    // 离开页面生命周期函数
    await socket.close();
  },
};
</script>

<style lang="sass">
#core-navigation-drawer
    &.v-navigation-drawer--mini-variant
        .v-list-item
            justify-content: flex-start !important

        .v-list-group--sub-group
            display: block !important

    .v-list-group__header.v-list-item--active:before
        opacity: .24

    .v-list-item
        &__icon--text,
        &__icon:first-child
            justify-content: center
            text-align: center
            width: 20px

            +ltr()
                margin-right: 24px
                margin-left: 12px !important

    .v-list--dense
        .v-list-item
            &__icon--text,
            &__icon:first-child
                margin-top: 10px

    .v-list-group--sub-group
        .v-list-item
            +ltr()
                padding-right: 0

        .v-list-group__header
            +ltr()
                padding-right: 0

            .v-list-item__icon--text
                margin-top: 19px
                order: 0

            .v-list-group__header__prepend-icon
                order: 2

                +ltr()
                margin-right: 8px
</style>
